<template>
  <div class="mine">
    <div class="mine1">
      <h3>个人中心</h3>
    </div>
    <div class="me">
      <div class="me1">
        <img v-if="userInfo"
          class="mineimg"
          src="../../../public/img/404.gif"
          alt=""
        />
        <img v-else
          class="mineimg"
          src="http://static.smartisanos.cn/mobilenew/img/head.4b81d150.png"
          alt=""
        />
        <div v-if="userInfo" class="login">
          <span class="logincode">{{userInfo.username}}</span>
        </div>
        <div v-else class="login" @click="gotopage('login')">
          <span class="logincode">登录</span>
          / <span class="loginpass">注册</span>
        </div>
        
      </div>
      <van-icon name="arrow" />
    </div>
    <van-grid column-num="5" class="tag">
      <van-grid-item icon="newspaper-o" text="全部订单" />
      <van-grid-item icon="gold-coin-o" text="待付款" />
      <van-grid-item icon="clock-o" text="待收货" />
      <van-grid-item icon="records" text="待评价" />
      <van-grid-item icon="balance-list-o" text="售后" />
    </van-grid>
    <div class="class">
      <van-cell size="large" title="地址管理" is-link :to='{name:"site"}'/>
      <van-cell size="large" title="我的优惠券" is-link />
      <van-cell size="large" title="优先购买码" is-link />
    </div>
    <div class="class">
      <van-cell size="large" title="常见问题" is-link />
      <van-cell size="large" title="服务支持" is-link />
    </div>
    <div class="class">
      <van-cell size="large" title="意外碎屏保修服务" is-link />
      <van-cell size="large" title="延长保修服务" is-link />
      <van-cell size="large" title="协议政策" is-link />
      <van-cell size="large" title="资质证照" is-link />
      <van-cell size="large" title="活动说明" is-link />
    </div>
    <div class="footlogin" v-if="userInfo" @click="dellogin">
      <van-cell size="large" title="退出登录" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods:{
    dellogin(){
      this.changeUserInfo(null);
    }
  }
};
</script>

<style lang="scss" scoped>
.mine {
  border: 1px solid #9991;
  background-color: #9994;
  .mine1 {
    background-color: white;
    line-height: 40px;
    position: absolute;
    top: 0;
    width: 100%;
  }
  .me {
    background-color: white;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    margin-top: 80px;
    padding: 15px;
    border-radius: 10px;
    align-items: center;
    .me1 {
      display: flex;
      align-items: center;
    }
    .login {
      margin-left: 15px;
      font-size: 16px;
    }
  }
  .mineimg {
    width: 65px;
    height: 65px;
  }
  .tag {
    margin-top: -5px;
  }
  .class {
    margin: 5px;
    font-size: 18px;
    text-align: left;
  }
  .footlogin {
    margin: 5px;
  }
}
</style>